<template>

  <div class="app-container">
    <div class="filter-container">
      <el-input  style="width: 200px;"   v-model="query.name" placeholder="维修厂名" class="filter-item"  ></el-input>
      <el-input  style="width: 200px;"   v-model="query.phone" placeholder="联系人" class="filter-item"  ></el-input>

      <el-button @click="getRecords" type="primary" class="filter-item">查询</el-button>
      <el-button @click="getRecords" type="primary" class="filter-item">刷新</el-button>
      <el-button @click="openAddDialog" type="primary" class="filter-item">添加</el-button>
    </div>

    <el-table v-loading="listLoading"	:data="list"	element-loading-text="Loading"	border	fit	highlight-current-row v-horizontal-scroll="'always'">
      <!-- <el-table-column type="selection" width="55" /> -->
      <!-- <el-table-column type="index" label="序列" width="50" /> -->
      <el-table-column prop="id" label="ID" width="50" />
      <el-table-column prop="name" label="名称" width="120" />
      <el-table-column prop="call_phone" label="电话" width="220" />
      <el-table-column prop="detail_address" label="地址" width="250" />
      <el-table-column prop="business_time" label="营业时间" width="120" />
      <el-table-column show-overflow-tooltip prop="introduce" label="介绍" width="300" />
      <el-table-column prop="created_at" label="创建时间" width="160" />
      <el-table-column prop="status" label="启用/禁用" width="100" >
        <template slot-scope="scope">
          <el-switch	v-model="scope.row.status"	active-color="#409EFF"	inactive-color="#909399"
             :active-value="1"	:inactive-value="2"		@change="changeStatus(scope.row)">
          </el-switch>
        </template>
      </el-table-column>
      <el-table-column fixed="right" label="操作" width="130">
        <template slot-scope="scope">
          <el-button size="mini" type="text" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
          <el-button size="mini" type="text" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="pagination.page"
      :page-sizes="[10, 20, 100, 200]"
      :page-size="pagination.pageSize"
      :background="true"
      layout="total, sizes, prev, pager, next, jumper"
      :total="pagination.total">
    </el-pagination>


  </div>

</template>

<script>

import { myGet,myPost } from '@/utils/myRequest'

const urlLst = '/guard/repair/factory/index';
const urlAdd = '/guard/repair/factory/add';
const urlDetail = '/guard/repair/factory/detail';
const urlDel = '/guard/repair/factory/del';

export default {

  data() {
    return {
      query:{
        name:'',
        phone:'',
      },
      host:process.env.VUE_APP_HOST,
      isAdd:true,
      dialogFormVisible:false,
      list: [],
      formLoading:false,
      listLoading: true,
      pagination:{
        total:0,
        page:1,
        pageSize:20,
      },
    }
  },
  methods: {
    onSubmit(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.formLoading = true;
          myPost(urlAdd,this.form).then(res=>{
            this.formLoading = false;
            if(res.status){
              this.dialogFormVisible = false
              Object.assign(this.form,this.$options.data().form)
              this.$message.success(res.msg);
              this.reload();
            }
          })
        } else {
          //this.$message.error('验证失败！');
          return false;
        }
      });
    },
    openAddDialog(){
      Object.assign(this.form,this.$options.data().form);
      this.dialogFormVisible = true
    },
    reload(){
      Object.assign(this.$data.query,this.$options.data().query)
      Object.assign(this.$data.pagination,this.$options.data().pagination)
      this.getRecords()
    },
    getRecords(){
      this.listLoading = true;
      let params = Object.assign(this.query,this.pagination)
      myGet(urlLst,params).then((res) =>{
        this.listLoading = false;
        if(res.status){
          this.list = res.data.records
          this.pagination.total = res.data.total
        }
      })
    },
    changeStatus(row){
      myPost(urlAdd,{id:row.id, status:row.status}).then(res => {
        if(res.status){
          this.$message.success(res.msg)
        }
      })
    },

    handleEdit(index, row) {
      const id = row.id
      this.$router.push('repairEdit/'+id)
    },
    handleDelete(index, row) {
      this.$confirm('确定删除吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        let ids = row.id
        myGet(urlDel, { ids }).then(res => {
          if (res.status) {
            this.$message.success(res.msg);
            this.reload();
          }
        })
      })
    },
    handleSizeChange(val) {
      this.pagination.pageSize = val
      this.pagination.page = 1
      this.getRecords()
    },
    handleCurrentChange(val) {
      this.pagination.page = val
      this.getRecords();
    },
    toggleSelection(rows) {
      if (rows) {
        rows.forEach(row => {
          this.$refs.multipleTable.toggleRowSelection(row);
        });
      } else {
        this.$refs.multipleTable.clearSelection();
      }
    }
  },
  mounted() {
    this.getRecords()
  }

}
</script>

<style scoped>

</style>
